<?php
include 'question_set.php';
$rawset = generate_set('easy');
$set = $rawset[1];
$indexs = $rawset[0];
?>

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">

    <script type="text/javascript">
    window.i = 0;
    window.maxCount = 10; //题目总数10
    function showinfo() {

    }

    function submit() {
        var ans_sheet = [];
        for (var j = 0; j < <?php echo($question_num) ?>; j++) {
            ans_sheet[j] = 0;
            for (var i = 0; i < document.getElementsByName("q_" + ((j + 1) + "")).length; i++) {
                if (document.getElementsByName("q_" + ((j + 1) + ""))[i].checked) {
                    ans_sheet[j] = Number(document.getElementsByName("q_" + ((j + 1) + ""))[i].value);
                }
            }
        }
        console.log(ans_sheet);
        var indexs = [
            <?php
            for($i=0;$i<$question_num;$i++){
                echo $indexs[$i],',';
            }
            ?>
        ];
        console.log(indexs);

        let xhr = new XMLHttpRequest();
        //2、设置请求参数
        xhr.open('post', 'answer_check.php', true);
        //3、设置回调函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.response);
                document.getElementById("phpdbg").innerHTML = xhr.response;
                showinfo(xhr.response);
            }
        }
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send("indexs=" + indexs + "&ans=" + ans_sheet);
    }
    </script>

    <script type="text/javascript">
    const sleep = time => {
        return new Promise(resolve => setTimeout(resolve, time))
    }

    function showinfo(res) {
        res = JSON.parse(res);
        document.getElementById('score').innerHTML = '您的得分是：' + res['score'] + '分！';
        document.getElementById('message').innerHTML = res['text'];
        if (res['status'] == 1) {
            document.getElementById('code').style.display = 'block';
            document.getElementById('qq_group').style.display = 'none';
            document.getElementById('invitation-code2').value = res['code'];
            document.getElementById('loading').className =
                'modal-content login-box-content b2-radius box_loading endload2';
            document.getElementById('loaded').className =
                'modal-content login-box-content b2-radius box_loaded endload1';
        } else {
            sleep(1000).then(function() {
                document.getElementById('code').style.display = 'none';
                document.getElementById('qq_group').style.display = 'block';
                document.getElementById('loading').className =
                    'modal-content login-box-content b2-radius box_loading endload2';
                document.getElementById('loaded').className =
                    'modal-content login-box-content b2-radius box_loaded endload1';
            })
        }

    }

    function reset() {
        document.getElementById('loginbox_inner').className = 'modal';
        sleep(150).then(function() {
            document.getElementById('loaded').className =
                'modal-content login-box-content b2-radius box_loaded inload0';
            document.getElementById('loading').className =
                'modal-content login-box-content b2-radius box_loading inload0';
        })
    }


    function submit() {
        document.getElementById('loginbox_inner').className = 'modal show-modal';
        document.getElementById('loading').className = 'modal-content login-box-content b2-radius box_loading endload1';
        var ans_sheet = [];
        for (var j = 0; j < <?php echo ($question_num) ?>; j++) {
            ans_sheet[j] = 0;
            for (var i = 0; i < document.getElementsByName("q_" + ((j + 1) + "")).length; i++) {
                if (document.getElementsByName("q_" + ((j + 1) + ""))[i].checked) {
                    ans_sheet[j] = Number(document.getElementsByName("q_" + ((j + 1) + ""))[i].value);
                }
            }
        }
        //console.log(ans_sheet);
        var indexs = [
            <?php
                for ($i = 0; $i < $question_num; $i++) {
                    echo $indexs[$i], ',';
                }
                ?>
        ];
        //console.log(indexs);

        let xhr = new XMLHttpRequest();
        //2、设置请求参数
        xhr.open('post', 'answer_check.php', true);
        //3、设置回调函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //console.log(xhr.response);
                //document.getElementById("phpdbg").innerHTML = xhr.response;
                showinfo(xhr.response);
            }
        }
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send("indexs=" + indexs + "&ans=" + ans_sheet + "&mode=easy");
    }
    </script>

    <style type="text/css">
    .mainDiv {
        width: 500px;
        height: auto;
        border: blue 1px solid;
    }

    .contentDiv {
        width: 490px;
        height: auto;
        border: green 1px solid;
        margin-left: 4px;
    }
    </style>
    <title>稻荷社区入站考试题</title>
</head>

<body>
    <h1>稻荷社区入站考试题</h1>
    <div id="" class="mainDiv">
        <?php
        global $question_num;
        $replacer = array('A','B','C','D');
        for ($q_num=1;$q_num<=$question_num;$q_num++){
        echo '<div id="q_',$q_num,'" class="contentDiv">';
            echo "第",$q_num,"题";
            echo '<p id="question_',$q_num,'" class="question">',$set[$q_num-1]->question,'</p>';
            for($choice=0;$choice<=3;$choice++){
                echo '<input type="radio" name="q_',$q_num,'" value="',$set[$q_num-1]->ans_id[$choice],'" id="ans_',$q_num,$set[$q_num-1]->ans_id[$choice],'"/>',
                     '<label for="ans_',$q_num,$set[$q_num-1]->ans_id[$choice],'">',$replacer[$choice],'.',$set[$q_num-1]->ans[$choice],'</label>';
                echo '<br>';
                }
        echo '</div>';
        }
        ?>
    </div>
    <input id="btnSubmit" type="button" value="提交" onclick="submit()">
    <div id="phpdbg"></div>

    <div id="login-box">
                <div id="loginbox_inner" class="modal">
                    <div id="loaded" class="modal-content login-box-content b2-radius box_loaded inload0">
                        <div class="box login-box-top" style="display:block"><span class="close-button" onclick="reset()">×</span>
                            <div class="login-logo"><img src="https://status.inapom.com/img/icon/daoheshequ.png"></div>
                            <div class="invitation-box"><i class="b2font b2-gift-2-line "></i>
                                <p id="score" class="invitation-des"></p>
                                <p id="message" class="invitation-tips"></p>
                                <div id="code" class="invitation-input" style="display: none"><input type="text" id="invitation-code2" name="invitation_code" autocomplete="off"></div>
                                <div id="qq_group" class="invitation-tips">
                                    <div><a href=" https://jq.qq.com/?_wv=1027&amp;k=45h0p2KA" target="__blank" style="color: red">您还可以加群申请邀请码</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="loading" class="modal-content login-box-content b2-radius box_loading inload0">
                        <div class="box login-box-top" style="display:block;text-align:center">
                            <div class="invitation-des">
                                loading...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</body>

</html>